<script>
import UpdateAccountDialog from "@/components/comp/account_com/UpdateAccountDialog.vue";
import BinShow from "@/components/show_data/BinShow.vue";
import ZhuShow from "@/components/show_data/ZhuShow.vue";
import Account_Data1 from "@/components/comp/account_com/Account_Data1.vue";
import Account_Data2 from "@/components/comp/account_com/Account_Data2.vue";
export default {
  name: "AccountInfo",
  components: {Account_Data1, Account_Data2,ZhuShow, BinShow, UpdateAccountDialog},
  data(){
    return {
      report:'',
    }
  },
  created() {
      this.show_userInfo();
  },

  methods:{
    show_userInfo(){
      this.report = this.$route.query.report;
    },

    updated_reload(){
      window.location.reload();
    },

    //显示修改弹窗
    show_edit(){
      this.$nextTick(()=>{
        this.$refs.edit_acc.show_dialog()
      })
    }
  }
}
</script>

<template>
  <div>
        <el-row>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: 'account_info' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>基础信息</el-breadcrumb-item>
          </el-breadcrumb>
        </el-row>

<!-----------------------------个人基础信息模块--------------------------------------------------------------->
        <el-card class="box-card" style="margin-top: 20px">
          <el-row>
            <el-col :span="22"><span style="font-size: 30px;font-weight: 350">详情信息</span></el-col>

            <el-col  :span="2"><el-button  @click="show_edit"  type="primary" icon="el-icon-editor">导出报告</el-button></el-col>
          </el-row>
<!--          <el-row style="margin-top:15px">-->
<!--            你可以在这里查看或修改个人信息-->
<!--          </el-row>-->

          <el-row style="margin-top:25px">


            <el-row >
              <el-col :span="5" >
                任务编号 : &nbsp;&nbsp;&nbsp;<span>{{report.taskNo }}</span>
              </el-col>
              <el-col :span="5" :offset="2">
                任务名称 : &nbsp;&nbsp;&nbsp;<span>{{ report.groupName }}</span>
              </el-col>
<!--              task.reportTime-->
              <el-col :span="9" :offset="2">
                报告时间 : &nbsp;&nbsp;&nbsp;<span>{{ report.reportTime?report.reportTime.substr(0,10):'' }}</span>
              </el-col>
            </el-row>

            <el-row style="margin-top: 20px">
              <el-col :span="5" >
                账号 : &nbsp;&nbsp;&nbsp;<span>{{ report.uname }}</span>
              </el-col>
              <el-col :span="5" :offset="2">
                姓名 : &nbsp;&nbsp;&nbsp;<span>{{ report.realName }}</span>
              </el-col>
              <el-col :span="9" :offset="2">
                出生日期 : &nbsp;&nbsp;&nbsp;<span>{{ report.birthday.substr(0,10) }}</span>
              </el-col>
            </el-row>

            <el-row style="margin-top: 20px">
              <el-col :span="5" >
                性别 : &nbsp;&nbsp;&nbsp;<span>{{ report.gender==0?'男':'女' }}</span>
              </el-col>
              <el-col :span="5" :offset="2">
                电话 : &nbsp;&nbsp;&nbsp;<span>{{ report.phone }}</span>
              </el-col>

              <el-col :span="9" :offset="2">
                年龄 : &nbsp;&nbsp;&nbsp;<span>{{ report.age }}</span>
              </el-col>
            </el-row>

          </el-row>
        </el-card>
<!------------------------  隐藏组件，修改个人信息弹窗  --------------------------------------------->

    <UpdateAccountDialog ref="edit_acc" @updated_user="updated_reload"></UpdateAccountDialog>

<!-----------------------------个人近期评测结果分析表--------------------------------------------------------------->
        <el-row :gutter="5" style="margin-top: 5px">


          <el-col :span="12">
            <el-card class="box-card" >
              <Account_Data1></Account_Data1>
            </el-card>
          </el-col>

          <el-col :span="12" >
            <el-card class="box-card" >
              <Account_Data2></Account_Data2>
            </el-card>
          </el-col>
        </el-row>



  </div>
</template>

<style scoped>
  .user_info_ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
  }
  .user_info_ul li{
    width: 400px;
    background-color: #e7e1cd;
  }
</style>